<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" class="tabel-form" label-width="80px">
      <div style="">
        <div>
          <el-form-item label="店铺ID">
            <el-input v-model="queryParams.shopCode" placeholder="请输入店铺ID"
                      style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" clearable/>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="queryParams.userName" placeholder="请输入用户名"
                      style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" clearable/>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="queryParams.nickName" placeholder="请输入昵称" clearable
                      style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="注册IP">
            <el-input v-model="queryParams.ip" placeholder="请输入注册IP" clearable
                      style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="上级查询">
            <el-input v-model="queryParams.supUserName" placeholder="请输入上级查询" clearable
                      style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="代理查询">
            <el-input v-model="queryParams.poxUserName" placeholder="请输入代理查询" clearable
                      style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="queryParams.phone" placeholder="输入手机号" clearable style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="queryParams.email" placeholder="输入邮箱" clearable style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="邀请码">
            <el-input v-model="queryParams.inviteCode" placeholder="输入邀请码" clearable style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="钱包地址">
            <el-input v-model="queryParams.bankNo" placeholder="输入钱包地址" clearable style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="店铺名称">
            <el-input v-model="queryParams.shopName" placeholder="输入店铺名称" clearable style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="用户直推" style="margin-right: 40px;">
            <el-input v-model="queryParams.userDirectPush" placeholder="输入用户名" clearable style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" @input="change1" />
          </el-form-item>
          <el-form-item label="用户伞下" style="margin-right: 40px;">
            <el-input v-model="queryParams.userUnderUmbrella" placeholder="输入用户名" clearable style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" @input="change2" />
          </el-form-item>
          <el-form-item label="用户三代" style="margin-right: 30px;">
            <el-input v-model="queryParams.user3rdGeneration" placeholder="输入用户名" clearable style="width: 180px;margin-right:20px;" @keyup.enter.native="handleQuery" @input="change3" />
          </el-form-item>
          <el-form-item label="是否充值" style="margin-right: 40px;">
            <el-select v-model="queryParams.charged" clearable style="width: 180px;" :disabled="disabled">
              <el-option v-for="item in isTopupList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="店铺状态" style="margin-right: 40px;">
            <el-select v-model="queryParams.shopStatus" clearable style="width: 180px;" :disabled="disabled">
              <el-option v-for="item in shopStateList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="店铺等级" prop="userLevel" style="margin-right: 30px">
            <el-select v-model="queryParams.shopLevelId" placeholder="请输入店铺等级" style="width: 180px;" clearable>
              <el-option v-for="item in storeLevelList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="会员层级" prop="storey" style="margin-right: 30px">
            <el-select v-model="queryParams.storey" placeholder="请输入会员层级" style="width: 180px;">
              <el-option v-for="item in storeyList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="余额" style="margin-right: 20px;">
            <el-input v-model="queryParams.balanceStart" placeholder="余额范围下限" clearable style="width: 130px;" />
            <span> 到 </span>
            <el-input v-model="queryParams.balanceEnd" placeholder="余额范围上限" clearable style="width: 130px;" />
          </el-form-item>
          <el-form-item prop="startTime" label="时间" style="margin-left: 30px">
            <timeConvert @time-range-selected="timeRange" ref="payTime"></timeConvert>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜 索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重 置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table v-loading="loading" :data="baseList">
<!--      <el-table-column label="店名" align="left" prop="shopName" width="140" :show-overflow-tooltip="true" />
      <el-table-column label="用户名" align="left" prop="userName" width="140" :show-overflow-tooltip="true" />
      <el-table-column label="店铺等级" align="center" prop="shopLevel" width="140" :show-overflow-tooltip="true" />
      <el-table-column label="电话" align="center" prop="phone" width="160" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="余额" align="center" prop="availableBalance" class-name="shop-balance" width="120" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
          <div><span>{{$yun.priceFormatter(scope.row.availableBalance)}}</span></div>
          <el-button size="mini" type="success" class="mini-btn mini-btn-left" plain
                     @click="handleBalance(scope.row)">修改</el-button>
        </template>
      </el-table-column>
       <el-table-column label="邮箱" align="center" prop="email" width="160" :show-overflow-tooltip="true"/>-->
      <el-table-column label="店铺列表" align="left" :min-width="190" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>
            <div>
              <span>用户UID：</span>
              {{scope.row.userRandomId}}
            </div>
            <div>
              <span>用户名：</span>
              {{scope.row.userName}}
            </div>
            <div>
              <span>昵称：</span>
              {{scope.row.nickName}}
            </div>
            <div>
              <span>会员层级：</span>
              {{ scope.row.storey }}
            </div>
            <!-- 店铺等级 -->
             <div>
              <span>店铺ID:</span>
              <span>{{ scope.row.shopCode }}</span>
            </div>
            <div>
              <span>店铺等级：</span>
              <span>{{ scope.row.vipLevel }}</span>
            </div>
            <div>
              <span>店铺名称：</span>
              {{ scope.row.shopName }}
            </div>
            <div>
              <span>代理名称：</span>
              {{ scope.row.agentAccount }}
            </div>
            <div>
              <span>上级名称：</span>
              {{ scope.row.superiorName }}
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="团队新增/过期" align="left" :min-width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>团队充提差：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.lastThreeDifference) }}</span>
          </div>
          <div>
            <span>团队待审核提现：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.lastThreeWaitWithdrawal) }}</span>
          </div>
          <div>
            <span>已过期人数：</span>
            <span>{{ scope.row.expireNumber }}</span>
          </div>
          <div>
            <span>30天新增人数：</span>
            <span>{{ scope.row.recentAdd }}</span>
          </div>
          <div>
            <span>30天过期人数：</span>
            <span>{{ scope.row.expireRecent }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="下级人数" align="left" :min-width="150" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>
            <div>
              <span>直推人数：</span>
              <span>{{ scope.row.directNumber }}</span>
            </div>
            <div>
              <span>2代人数：</span>
              <span>{{ scope.row.twoNumber }}</span>
            </div>
            <div>
              <span>3代人数：</span>
              <span>{{ scope.row.threeNumber }}</span>
            </div>
            <div>
              <span>团队人数：</span>
              <span>{{ scope.row.lastThreeNum }}</span>
            </div>
            <div>
              <span>注册人数：</span>
              <span>{{ scope.row.lastThreeRegisterNum }}</span>
            </div>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="金额信息" align="left" :min-width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>店铺余额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.availableBalance) }}</span>
          </div>
          <div>
            <span>店铺充值金额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.recharge) }}</span>
          </div>
          <div>
            <span>店铺提现金额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.withdrawal) }}</span>
          </div>
          <div>
            <span>店铺充提差：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.difference) }}</span>
          </div>
<!--          <div>
            <el-button size="mini" type="success" class="mini-btn mini-btn-left" plain
                       @click="handleBalance(scope.row)">修改余额</el-button>
          </div>-->
        </template>
      </el-table-column>
      <el-table-column label="店铺信息" align="left" :min-width="300" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>店铺库存额：</span>
            <span>{{ scope.row.stocksAmount	 }}</span>
          </div>
          <div>
            <span>店铺库存商品数：</span>
                        <span>{{ scope.row.stocksNum }}</span>
          </div>
          <div>
            <span>店铺日收益/总收益：</span>
            <span>{{ scope.row.todayIncome }} / {{ scope.row.cumulative }}</span>
          </div>
          <div>
            <span>店铺日订单数量/总订单数量：</span>
            <span>{{ scope.row.todayOrderNum }} / {{ scope.row.orderNumber }}</span>
          </div>
          <div>
            <span>店铺进货后付优惠总金额：</span>
            <span>{{ scope.row.discountAmount }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数量" align="left" :min-width="150" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>首充天数：</span>
            <span v-if="scope.row.firstChargeDay">{{ scope.row.firstChargeDay }}</span>
            <span v-else>未充值</span>
          </div>
          <div>
            <span>充/提次数：</span>
            <span>{{ scope.row.rechargeNumber }} / {{ scope.row.withdrawalNumber }}</span>
          </div>
          <div>
            <span>同行为IP数：</span>
            <span>
              {{ scope.row.sameRegisterIpNum }}
              <span v-show="scope.row.country">({{ scope.row.country }})</span>
            </span>
          </div>
          <div>
            <span>是否充值：</span>
            <span>{{ scope.row.recharged==1?'是':'否' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收益/复充" align="left" :min-width="280" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>个人收益今日/累计：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.todayIncome) }} / {{ '$' + $yun.formatAmount(scope.row.cumulative) }}</span>
          </div>
          <div>
            <span>团队收益今日/累计：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.todayTeamIncome) }} / {{ '$' + $yun.formatAmount(scope.row.totalTeamIncome) }}</span>
          </div>
          <div>
            <span>1.2.3代复充/提现金额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.lastThreeGenRecharge) }} / {{ '$' + $yun.formatAmount(scope.row.lastThreeWithdrawal) }}</span>
          </div>
          <div>
            <span>团队复充/提现金额：</span>
            <span>{{ '$' + $yun.formatAmount(scope.row.teamRepeatedRecharge) }} / {{ '$' + $yun.formatAmount(scope.row.teamWithdrawal) }}</span>
          </div>
          <div>
            <span>备注：</span>
            <span style="color: red;" >{{ scope.row.remark }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" align="left" :min-width="250" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>注册店铺时间：</span>
            <span>{{ $yun.convertTimestamp(scope.row.createTime)}}</span>
          </div>
          <div>
            <span>注册IP：</span>
            <span>{{ scope.row.applyIp }}</span>
          </div>
          <div>
            <span>最后操作IP：</span>
            <span>{{ scope.row.latestIp }}</span>
          </div>
          <div>
            <span>最后操作时间：</span>
            <span>{{ scope.row.latestOperateTime }}</span>
          </div>
           <div>
            <span>钱包地址：</span>
            <span style="color: red">{{ scope.row.walletAddress }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="其他" align="left" :min-width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div>
            <span>{{ scope.row.virtualUsers == 1 ? '真实店铺' : '虚拟店铺' }}</span>
          </div>
          <div>
            <span>店铺：</span>
            <span>{{ scope.row.shopName }}</span>
          </div>
          <div>
            <span>状态：</span>
            <span>{{ scope.row.status == 0 ? '正常' : '冻结' }}</span>
          </div>
          <div>
            <span>手机号：</span>
            <span>{{ scope.row.phone }}</span>
          </div>
          <div>
            <span>邮箱：</span>
            <span>{{ scope.row.email }}</span>
          </div>
          <div style="display: flex;align-items: center;">
            <div style="margin-right: 10px;">
              <span>锁定：</span>
              <span>{{ scope.row.lockState == 0 ? '未锁定' : '已锁定' }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" class-name="max-operate-tab" width="400" fiexd="right">
        <template slot-scope="scope">
          <div>
            <el-button size="mini" type="text" icon="el-icon-notebook-2" @click="showBalanceDetials(scope.row)">查看</el-button>
            <el-button size="mini" type="text" icon="el-icon-notebook-2" @click="showContract(scope.row)">查看合同</el-button>
            <el-button size="mini" type="text" icon="el-icon-shopping-cart-2" @click="$router.push({path:'/store/anchorProduct',query:{shopId:scope.row.shopId}})">主播带货</el-button>
            <el-button size="mini" type="text" icon="el-icon-money" @click="$router.push({path:'/store/storeFunds',query:{shopId:scope.row.shopId}})">店铺资金</el-button>
            <el-button size="mini" type="text" icon="el-icon-goods" @click="$router.push({path:'/store/products',query:{shopId:scope.row.shopId}})">在售商品</el-button>
            <el-button size="mini" type="text" icon="el-icon-s-goods" @click="$router.push({path:'/store/soldGoods',query:{shopName:scope.row.shopName}})">已售商品</el-button>
            <el-button size="mini" type="text" icon="el-icon-postcard" @click="$router.push({path:'/store/settlementCycle',query:{shopName:scope.row.shopName}})">批次单</el-button>
            <el-button size="mini" type="text" icon="el-icon-shopping-cart-2" @click="$router.push({path:'/store/purchaseRecord',query:{shopId:scope.row.shopId}})">采购记录</el-button>
            <el-button size="mini" type="text" icon="el-icon-shopping-cart-2" @click="$router.push({path:'/store/recharge',query:{id:scope.row.shopId}})">充值审核</el-button>
            <el-button size="mini" type="text" icon="el-icon-sold-out" @click="$router.push({path:'/store/withdrawals',query:{id:scope.row.shopId}})">提现审核</el-button>
            <el-button size="mini" type="text" icon="el-icon-tickets" @click="$router.push({path:'/order/list',query:{shopId:scope.row.shopId,orderStatus:'0'}})">未发货订单</el-button>
            <el-button size="mini" type="text" icon="el-icon-refresh" @click="$router.push({path:'/store/banner',query:{shopId:scope.row.shopId}})">流量管理</el-button>
            <el-button size="mini" type="text" icon="el-icon-view" @click="$router.push({path:'/live/ownerTaskAudit',query:{shopName:scope.row.shopName}})">直播任务</el-button>
            <el-button size="mini" type="text" icon="el-icon-marketing" @click="$router.push({path:'/store/storeFlowHistory',query:{shopId:scope.row.shopId}})">流量消耗</el-button>
            <el-button size="mini" type="text" icon="el-icon-tickets" @click="$yun.handleTodo">水军打单</el-button>
            <el-button size="mini" type="text" icon="el-icon-thumb" @click="limitBtn(scope.row.userId)">权限管理</el-button>
            <el-button size="mini" type="text" icon="el-icon-postcard" @click="$router.push({path:'/store/banner',query:{shopId:scope.row.shopId}})">广告管理</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['car:base:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-lock" @click="$router.push({path:'/store/closeAudit'})" v-hasPermi="['car:base:edit']">闭店</el-button>
<!--            <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                         v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">
              <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="showBalanceList">店铺资金</el-dropdown-item>
                <el-dropdown-item command="showProductList">在售商品</el-dropdown-item>
                <el-dropdown-item command="handPurchaseRecord">采购记录</el-dropdown-item>
                <el-dropdown-item command="handBanner">广告管理</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>-->

          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getStoreList" />

    <!-- 添加或修改用户小店对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="小店名" prop="shopName">
              <el-input class="modal-input" v-model="form.shopName" placeholder="请输入小店名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业名称" prop="companyName">
              <el-input class="modal-input" v-model="form.companyName" placeholder="请输入企业名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input class="modal-input" v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input class="modal-input" v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="小店介绍" prop="intro">
              <el-input class="modal-input" v-model="form.intro" placeholder="请输入小店介绍" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input class="modal-input" v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺地址" prop="shopAddress">
              <el-input class="modal-input" v-model="form.shopAddress" placeholder="请输入店铺地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌标记" prop="brandFlag">
              <el-input class="modal-input" v-model="form.brandFlag" placeholder="请输入品牌标记" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="telegram" prop="telegram">
              <el-input class="modal-input" v-model="form.telegram" placeholder="请输入telegram" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="whatsapp" prop="whatsapp">
              <el-input class="modal-input" v-model="form.whatsapp" placeholder="请输入whatsapp" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="小店头像" prop="shopAvatarUrl">
              <ImageUpload :limit="1" v-model="form.shopAvatarUrl"></ImageUpload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小店封面" prop="shopCoverUrl">
              <!-- <el-input class="modal-input" v-model="form.shopCoverUrl" placeholder="请输入小店封面" /> -->
              <ImageUpload :limit="1" v-model="form.shopCoverUrl"></ImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="带货类型id(商品父id)" prop="productTypeId">
              <el-input v-model="form.productTypeId" placeholder="请输入带货类型id(商品父id)" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商铺等级" prop="shopLevelId">
              <el-input v-model="form.shopLevelId" placeholder="请输入商铺等级" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="带货地区id(地区父id)" prop="areaId">
              <el-input v-model="form.areaId" placeholder="请输入带货地区id(地区父id)" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否被删除 0 未删除 1 已删除" prop="deleted">
              <el-input v-model="form.deleted" placeholder="请输入是否被删除 0 未删除 1 已删除" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺销量" prop="shopSalesVolume">
              <el-input v-model="form.shopSalesVolume" placeholder="请输入店铺销量" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店铺销售额" prop="shopSalesAmount">
              <el-input v-model="form.shopSalesAmount" placeholder="请输入店铺销售额" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺商品数" prop="shopProductNum">
              <el-input v-model="form.shopProductNum" placeholder="请输入店铺商品数" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="粉丝数" prop="interestNum">
              <el-input v-model="form.interestNum" placeholder="请输入粉丝数" />
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="企业营业执照" prop="companyLicenseUrl">
              <!-- <el-input class="modal-input" v-model="form.companyLicenseUrl" placeholder="请输入企业营业执照" /> -->
              <ImageUpload :limit="1" v-model="form.companyLicenseUrl"></ImageUpload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件正面照" prop="cardFrontUrl">
              <ImageUpload :limit="1" v-model="form.cardFrontUrl"></ImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 店铺详情 -->
    <el-dialog title="店铺详情" :visible.sync="openStoreDetails" width="1000px" append-to-body :close-on-click-modal="false">
      <div class="store-container">
        <el-scrollbar>
          <el-row class="details-row">
            <el-col :span="12" class="details-col">
              <span class="details-label">小店名称：</span>
              <span>{{ storeDetail.shopName }}</span>
            </el-col>
            <el-col :span="12">
              <span class="details-label">企业名称：</span>
              {{ storeDetail.companyName }}
            </el-col>
          </el-row>
          <el-row class="details-row">
            <el-col :span="12">
              <span class="details-label">联系人：</span>
              <span>{{ storeDetail.name }}</span>
            </el-col>
            <el-col :span="12">
              <span class="details-label">联系人电话：</span>
              <span>{{ storeDetail.phone }}</span>
            </el-col>
          </el-row>
          <el-row class="details-row">
            <el-col :span="12">
              <span class="details-label">邮箱：</span>
              <span>{{ storeDetail.email }}</span>
            </el-col>
            <el-col :span="12">
              <span class="details-label">店铺地址：</span>
              {{ storeDetail.shopAddress }}
            </el-col>
          </el-row>
          <el-row class="details-row">
            <el-col :span="12">
              <span class="details-label">telegram：</span>
              <span>{{ storeDetail.telegram }}</span>
            </el-col>
            <el-col :span="12">
              <span class="details-label">whatsapp：</span>
              {{ storeDetail.whatsapp }}
            </el-col>
          </el-row>
          <el-row class="details-row">
            <el-col :span="12">
              <span class="details-label">店铺介绍：</span>
              <span>{{ storeDetail.intro }}</span>
            </el-col>
          </el-row>
          <el-row class="details-row details-img-row">
            <el-col :span="12">
              <span class="details-label">店铺头像：</span>
              <div class="details-img">
                <el-image fit="contain" :src="storeDetail.shopAvatarUrl"></el-image>
              </div>
            </el-col>
            <el-col :span="12">
              <span class="details-label">店铺封面：</span>
              <!-- {{ storeDetail.shopCoverUrl }} -->
              <div class="details-img">
                <el-image fit="scale-down" :src="storeDetail.shopCoverUrl"></el-image>
              </div>
            </el-col>
          </el-row>
          <el-row class="details-row details-img-row">
            <el-col :span="12">
              <span class="details-label">营业执照：</span>
              <!-- <span>{{ storeDetail.companyLicenseUrl }}</span> -->
              <div class="details-img">
                <el-image fit="scale-down" :src="storeDetail.companyLicenseUrl"></el-image>
              </div>
            </el-col>
            <el-col :span="12">
              <span class="details-label">证件正面照：</span>
              <!-- {{ storeDetail.cardFrontUrl }} -->
<!--              $yun.getPreviewUrl()-->
              <div class="details-img">
                <el-image fit="scale-down" :src="storeDetail.cardFrontUrl"></el-image>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </el-dialog>
    <!-- 店铺余额列表 -->
    <el-dialog title="店铺资金" :visible.sync="openBalanceList" width="800px" append-to-body :close-on-click-modal="false">
      <el-card class="box-card">
        <!-- <div slot="header" class="clearfix">
          <span>店铺余额列表</span>
        </div> -->
        <div>

          <el-table v-loading="loadingBalanceList" :data="balances" @selection-change="handleSelectionChange"
            style="width:auto !important;">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <!-- <el-table-column label="用户id" align="center" prop="userId" />
            <el-table-column label="店铺id" align="center" prop="shopId" /> -->
            <el-table-column label="总余额" align="center" prop="totalBalance" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ formatter(scope.row, 'totalBalance') }}</span>
              </template></el-table-column>
            <el-table-column label="可用余额" align="center" prop="availableBalance" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ formatter(scope.row, 'availableBalance') }}</span>
              </template></el-table-column>
            <el-table-column label="冻结收入" align="center" prop="freezeIn" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ formatter(scope.row, 'freezeIn') }}</span>
              </template></el-table-column>
            <el-table-column label="冻结支出" align="center" prop="freezeOut" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{ formatter(scope.row, 'freezeOut') }}</span>
              </template></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="">
                <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                  v-hasPermi="['car:balance:edit']">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                  v-hasPermi="['car:balance:remove']">删除</el-button> -->

              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="balanceTotal > 0" :total="balanceTotal" :page.sync="balanceQueryParams.pageNum"
            :limit.sync="balanceQueryParams.pageSize" @pagination="getBalanceList" />
        </div>
      </el-card>

    </el-dialog>
<!--    修改店铺余额-->
    <el-dialog title="修改店铺余额" :visible.sync="openChangeBalance" width="500px" append-to-body>
          <el-form ref="formBalance" :model="formBalance">
            <el-form-item label="类型" prop="category">
              <el-radio v-model="formBalance.category" label="gf">充值</el-radio>
              <el-radio v-model="formBalance.category" label="de">扣费</el-radio>
            </el-form-item>
            <el-form-item label="金额" prop="amountIncurred" :rules="[{required: true, message: '请输入需要修改的余额', trigger: 'blur'},]">
              <el-input v-model="formBalance.amountIncurred" type="number" :min="0" placeholder="请输入金额"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark" :rules="[{required: true, message: '备注不能为空', trigger: 'blur'},]">
              <el-input type="text"  v-model="formBalance.remark" placeholder="请输入备注"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormBalance">确定</el-button>
            <el-button @click="cancelFormBalance">取消</el-button>
          </div>
    </el-dialog>
    <el-dialog title="查看合同" :visible.sync="openContract" width="800px" append-to-body>
      <div v-html="concact" v-if="concact"></div>
      <div v-else>
        <el-empty description="暂无数据"></el-empty>
      </div>
    </el-dialog>
    <!-- 权限管理 -->
    <el-dialog :close-on-click-modal="false" title="权限管理" :visible.sync="open1" width="600px" append-to-body>
      <el-form label-position="left" ref="formPopTi" :model="limitObj" label-width="130px">
        <div style="display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0 30px;">
          <el-form-item :label="item.limitName" v-for="item in userLimitList" :key="item.diyName">
            <el-switch v-model="item.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                       :inactive-value="2" @change="handleStatusChange(item.id)" />
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="open1 = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  getDetails,
  delStore,
  addStore,
  updateStore,
  changeBalance,
  getConcact,
  shopDataStatistics, shopDetail
} from '@/api/store/list'
import {balanceList} from "@/api/store/storeFuns";
import { storeLevelList } from "@/api/setting/gradeRebate";
import OssImagePreview from "@/components/ImagePreview/oss-image-preview.vue";
import Template from '@/views/setting/template/index.vue'
import request from '@/utils/request'
import { handleTodo } from '@/utils/yun'
import {
  limitList, coLimit, levelAll
} from '@/api/user/list'
export default {
  name: "Base",
  components: { Template, OssImagePreview },
  dicts: ['shop_status', 'store_business_type', 'transaction_type', 'balance_inOut','activity_store_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户小店表格数据
      baseList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      open1: false,
      // 查询参数
      queryParams: {
        shopName:'',
        userDirectPush:null,
        userUnderUmbrella:null,
        user3rdGeneration:null,
        pageNum: 1,
        pageSize: 10,
      },
      disabled:false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        shopName: { required: true, message: "请输入小店名称", trigger: "blur" },
        companyName: { required: true, message: "请输入企业名称", trigger: "blur" },
        name: { required: true, message: "请输入联系人姓名", trigger: "blur" },
        phone: { required: true, message: "请输入联系人电话号码", trigger: "blur" },
        intro: { required: true, message: "请输入店铺介绍", trigger: "blur" },
        shopAddress: { required: true, message: "请输入店铺地址", trigger: "blur" },
        telegram: { required: true, message: "请输入telegram", trigger: "blur" },
        whatsapp: { required: true, message: "请输入whatsapp", trigger: "blur" },
        shopAvatarUrl: { required: true, message: "请上传商铺头像", trigger: "blur" },
        shopCoverUrl: { required: true, message: "请上传商铺封面", trigger: "blur" },
        companyLicenseUrl: { required: true, message: "请上传营业执照", trigger: "blur" },
        cardFrontUrl: { required: true, message: "请上传证件正面照", trigger: "blur" },
      },
      //商铺等级列表
      storeLevelList: [],
      openBalanceList: false,
      balanceQueryParams: {
        pageNum: 1,
        pageSize: 10
      },
      balanceTotal: 0,
      loadingBalanceList: false,
      balances: [],
      openBalanceDetails: false,
      loadingBalanDetail: false,
      balanceSlip: [],
      balanceSlipTotal: 0,
      loadingBalanceSlip: false,
      balanceDetailParams: {
        pageNum: 1,
        pageSize: 10
      },
      //店铺详情
      storeDetail: {},
      //显示店铺详情
      openStoreDetails: false,
      //显示修改余额
      openChangeBalance:false,
      //修改金額表單
      formBalance:{category:'gf',amountIncurred:'',remark:''},
      //显示合同dialog
      openContract:false,
      concact:null,
      limitObj: {},
      userLimitList:[],
      //是否充值列表
      isTopupList: [{ id: 1, name: '是' }, { id: 2, name: '否' }],
      // 用户伞下
      // sanxiaList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      // // 用户三代
      // userSandai: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      // //用户直推
      // pushUserList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      // 用户状态
      shopStateList: [{id:0,name:'正常'},{id:-1,name: '冻结'},{id:-2,name:'关店'}],
      // 层级
      storeyList:[{id:1,name:'1层'},{id:2,name:'2层'},{id:3,name:'3层'},{id:4,name:'4层'},{id:5,name:'5层'}],
    };
  },
  created() {
    this.getStoreLevelList();
    this.getStoreList();
  },
  methods: {
    // 修改权限状态
    handleStatusChange(id) {
      coLimit(id).then(res => {
        if (res.success) {
          this.getStoreList();
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取权限列表
    limitBtn(id){
      let obj = {
        userId:id,
        type: 2,
      };
      limitList(obj).then(res => {
        this.userLimitList = res.data
        this.open1 = true;
      })
    },
    handleTodo,
    /** 查询店铺等级列表 */
    getStoreLevelList() {
      storeLevelList().then(response => {
        this.storeLevelList = response.data;
      });
    },
    /** 查询用户小店列表 */
    getStoreList() {
      this.loading = true;
      this.$yun.removeEmptyValues(this.queryParams)
      shopDataStatistics(this.queryParams).then(response => {
        this.baseList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    }, // 更多操作触发
    async handleCommand(command, row) {
      switch (command) {
        case "showBalanceList":
          this.$router.push({path:'/store/storeFunds',query:{shopId:row.id}});
          break;
        case "showProductList":
          tthis.$router.push({ path: '/store/products', query: { id:row.id } });
          break;
        case "handPurchaseRecord":
          this.$router.push({ path: '/store/purchaseRecord', query: { id:row.id } });
          break;
        case "handBanner":
          this.$router.push({ path: '/store/banner', query: { id:row.id } });
          break;
        default:
          break;
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userId: null,
        name: null,
        shopName: null,
        shopAvatarUrl: null,
        shopCoverUrl: null,
        cardFrontUrl: null,
        companyName: null,
        companyCreditCode: null,
        companyLicenseUrl: null,
        phone: null,
        email: null,
        whatsapp: null,
        telegram: null,
        intro: null,
        type: null,
        status: null,
        approvalBy: null,
        approvalTime: null,
        createTime: null,
        updateTime: null,
        productTypeId: null,
        shopLevelId: null,
        areaId: null,
        deleted: null,
        shopSalesVolume: null,
        shopSalesAmount: null,
        shopProductNum: null,
        interestNum: null,
        businessType: null,
        shopAddress: null,
        brandFlag: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
/*      if(this.queryParams.userDirectPush > 0) this.queryParams.conditionType = 1
      if(this.queryParams.userUnderUmbrella > 0) this.queryParams.conditionType = 2
      if(this.queryParams.user3rdGeneration > 0) this.queryParams.conditionType = 3
      if(this.queryParams.conditionType && !this.queryParams.shopName) return this.$modal.msgError('请输入账户名')*/
      this.getStoreList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['payTime'].clear();
      this.resetForm("queryForm");
      this.disabled = false;
      this.queryParams = {
        shopName:'',
        pageNum: 1,
        pageSize: 10,
        userDirectPush:null,
        userUnderUmbrella:null,
        user3rdGeneration:null,
      }
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户小店";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      this.form = row;
      this.open = true;
      this.title = "修改用户小店";
      // getDetails(id).then(response => {
      //   this.form = response.data;
      //   this.open = true;
      //   this.title = "修改用户小店";
      // });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateStore(this.form).then(response => {
              if(response.data.success){
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getStoreList();
              }else{
                this.$modal.msgError(response.data.msg)
              }
            });
          } else {
            addStore(this.form).then(response => {
              if(response.data.success){
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getStoreList();
              }else{
                this.$modal.msgError(response.data.msg)
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除用户小店编号为"' + ids + '"的数据项？').then(function () {
        return delStore(ids);
      }).then(() => {
        this.getStoreList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('car/base/export', {
        ...this.queryParams
      }, `base_${new Date().getTime()}.xlsx`)
    },

    // showBalanceList 查看店铺余额列表店铺资金
    showBalanceList: function (row) {
      this.$router.push({path:'/store/storeFunds',query:{shopId:row.id}});
      // this.openBalanceList = true;
      // this.balanceQueryParams.shopId = row.id;
      // this.getBalanceList();
    },
    //获取余额列表
    getBalanceList: function () {
      balanceList(this.balanceQueryParams).then(response => {
        this.balances = response.data.records;
        this.balanceTotal = response.data.total;
        this.loadingBalanceList = false;
      });
    },
    //格式化金额
    formatter: function (row, key) {
      return this.$yun.priceFormatter(row[key]);
    },
    //查看交易记录
    showBalanceDetials: function (row) {
      this.openStoreDetails = true;
      shopDetail(row.shopId).then(res => {
        this.storeDetail = res.data;
        console.log('res.data',res.data)
      })
    },
    //查看商品列表
    showProductList:function(row) {
      this.$router.push({ path: '/store/products', query: { id:row.id } });
    },
    //修改余额
    handleBalance:function(row) {
      this.formBalance.shopId = row.shopId;
      this.openChangeBalance = true;
    },
    //重置余额表单
    resetBalanceForm:function() {
      this.formBalance={
        category:'gf',amountIncurred:''
      };
      this.$nextTick(()=>{
        this.$refs.formBalance.resetFields();
        this.$refs.formBalance.clearValidate();
      })
    },
    //提交余额表单
    submitFormBalance:function() {
      this.$refs["formBalance"].validate(valid => {
        if (valid) {
          changeBalance(this.formBalance).then(request=>{
            this.$refs['formBalance'].resetFields()
            this.$modal.msgSuccess("修改成功");
            this.openChangeBalance = false;
            this.getStoreList();
          })
        }
      })
    },
    //取消更改余额
    cancelFormBalance:function() {
      this.$refs['formBalance'].resetFields()
      this.openChangeBalance = false;
    },
    //查看合同
    showContract:function(row) {
      getConcact(row.shopId).then(res=>{
        if(res.data && res.data.shopContract){
          this.concact = res.data.shopContract;
        }
          this.openContract = true;
      })
    },
    //查看采购记录
    handPurchaseRecord:function(row) {
      this.$router.push({ path: '/store/purchaseRecord', query: { id:row.id } });
    },
    //查看banner
    handBanner:function(row) {
      this.$router.push({ path: '/store/banner', query: { id:row.id } });
    },
    change1(e) {
      console.log('1',e)
      if (this.queryParams.userDirectPush){
        this.disabled = true
      }else{
        this.disabled = false
      }
      this.$set(this.queryParams,'userUnderUmbrella','')
      this.$set(this.queryParams,'user3rdGeneration','')
    },
    change2(e) {
      if (this.queryParams.userUnderUmbrella){
        this.disabled = true
      }else{
        this.disabled = false
      }
      this.$set(this.queryParams,'userDirectPush','')
      this.$set(this.queryParams,'user3rdGeneration','')
    },
    change3(e) {
      if (this.queryParams.user3rdGeneration){
        this.disabled = true
      }else{
        this.disabled = false
      }
      this.$set(this.queryParams,'userDirectPush','')
      this.$set(this.queryParams,'userUnderUmbrella','')
    },
    timeRange(obj){
      this.queryParams.startTime = obj.startTime
      this.queryParams.endTime = obj.endTime
    },
  }
};
</script>

<style lang="scss" scope>
.details-row {
  height: 30px;
  line-height: 30px;

  .details-label {
    display: inline-block;
    width: 100px;
    font-size: 15px;
    color: #606266;
    font-weight: 700;
  }
  .details-img {
    display: inline-block;
    width: 100px; height: 100px;
    overflow:hidden;
    vertical-align: top;
    line-height: 100px;
    text-align: center;
    background-color: #F5F7FA;
  }
}
  .details-img-row {
    padding-top: 10px;
    height: 120px;
    line-height: unset;
  }
  .shop-balance {
    .el-button--mini.mini-btn-left {
      padding: 5px 10px;
    }
  }
</style>
